<template>
<!-- 左侧导航-->
  <el-aside>
    <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="/index"
        text-color="#fff"
        router
    >
      <el-menu-item index="/index">首页</el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><location/></el-icon>
          <span>访问管理</span>
        </template>
        <el-menu-item index="/userList">用户管理</el-menu-item>
        <el-menu-item index="/depart">部门管理</el-menu-item>
        <el-menu-item index="/roleAndPermission">角色权限管理</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import {Document, Menu as IconMenu, Location, Setting} from '@element-plus/icons-vue'


</script>
<style>
.el-menu {
  background-color: #015198;
  border: 0;
  height: 100%;
  width: auto;
  min-width: 200px;
  padding: 10px;
}

.el-sub-menu {
}

.el-menu-item, .el-sub-menu__title {
  border-radius: 5px !important;
  height: 36px !important;
  margin-bottom: 8px !important;
}

/*悬停样式*/
.el-sub-menu__title:hover, .el-menu-item:hover {
  background-color: #0a5faa;
}

/*选中样式*/
.el-menu-item.is-active {
  background-color: #f8f5f5 !important;
  color: #015198 !important;
}


</style>